<template>
  <page-header-wrapper
    :tab-list="tabList"
    :tab-active-key="tabActiveKey"
    :tab-change="handleTabChange"
  >
    <template v-slot:title>
      <div class="title" />
    </template>

    <router-view />
  </page-header-wrapper>
</template>

<script>
const BASE_URL = '/index/loan/details'

export default {
  name: 'Examine',
  data () {
    return {
      tabList: [
        { key: '1', tab: '审批内容' },
        { key: '2', tab: '审批记录' },
      ],
      tabActiveKey: '1',
      search: true,
    }
  },

  computed: {
    // route url
    routerPath () {
      return `${BASE_URL}/${this.tid}`
    },

    // tid
    tid () {
      return this.$route.params.tid
    },
  },

  created () {
    this.tabActiveKey = this.getActiveKey(this.$route.path)

    this.$watch('$route', (val) => {
      this.tabActiveKey = this.getActiveKey(val.path)
    })
  },
  methods: {
    getActiveKey (path) {
      console.log(path, 'dadadad', this.routerPath)
      switch (path) {
        case `${this.routerPath}/content`:
          return '1'
        case `${this.routerPath}/record`:
          return '2'
        default:
          return '1'
      }
    },

    handleTabChange (key) {
      this.tabActiveKey = key
      switch (key) {
        case '1':
          this.$router.push('content')
          break
        case '2':
          this.$router.push('record')
          break
        default:
          this.$router.push('/workplace')
      }
    },
  },
}
</script>

<style lang="less" scoped>

</style>
